<template>
	<view class="container ">
		<!-- 顶部搜索 -->
		<view class="row search-view">
			<input placeholder="请输入菜名" confirm-type="search" @confirm="onSearch"></input>
			<image class="auto-left" :src="url+'/static/imgs/search.png'"></image>
		</view>
		<view class="row main">
			<view class="col goods-list">
				<view class="col goods-item" v-for="(item,index) in goodsList" v-bind:key="index">
					<view class="row goods-header">
						<image :src="item.goods_naming.member_avatar?item.goods_naming.member_avatar:url+'/static/imgs/user-color.png'"></image>
						<view class="user-name">【{{item.goods_naming.name?item.goods_naming.name:'未冠名'}}】</view>
						<view class="goods-name">{{item.name}}</view>
					</view>
					<view class="row goods-content">
						<image class="cover-image" :src="item.image" mode="aspectFill"></image>
						<view class="col goods-content-main">
							<view class="description">
								<text v-if="item.goods_naming.title">{{item.goods_naming.title}}</text>
								<view v-else class="col status-none">
									<text>未冠名</text>
									<text>0.1元即可冠名。</text>
								</view>
							</view>
							<view class="row">
								<view class="price" v-if="item.goods_naming.price">¥{{item.goods_naming.price}}</view>
								<view class="row operate auto-left">
									<view class="button button-active" @click="toConfirm" :data-index="index">夺冠名</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="row paginate">
			<text>
				<block>{{config.show_loading?config.loading_msg:''}}</block>
				<block>{{config.show_finish?config.finish_msg:''}}</block>
				<block>{{config.show_empty?config.empty_msg:''}}</block>
			</text>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import http from "../../../../common/js/request.js";
	import common from "../../../../common/js/function.js";
	export default {
		data() {
			return {
				config: {}, //分页配置
				busy: false, //当前上拉加载的忙碌状态
				url: app.globalData.baseImgUrl,
				store_id: app.globalData.storeId,
				goodsList: [],
				keyword: '',
			}
		},
		onLoad() {
			var that = this;
			that._load();
		},

		methods: {
			_load() {
				var that = this;
				that.goodsList = [];
				that._setConfig(() => {
					that.getGoodsList();
				});
			},
			_setConfig(callback = '') {
				var that = this;
				that.config = common.getPageConfig();
				typeof callback == 'function' ? callback() : ''
			},
			//获取商品列表
			getGoodsList() {
				var that = this;
				if (that.config.show_finish) return false;
				that.config.show_loading = true; //展示loading
				var current_page = that.config.current_page;
				http.post('/api/v1/goods/goods_list', {
					page: current_page,
					store_id: that.store_id,
					keyword: that.keyword
				}, res => {
					that.goodsList = that.goodsList.concat(res.datas);
					that.config.show_loading = false; //关闭loading
					if (res.datas.length == 0) {
						if (current_page == 1) {
							that.config.show_empty = true;
						} else {
							that.config.show_finish = true;
						}
					}
					that.busy = false;
				});
			},

			onReachBottom() {
				var that = this;
				console.log('toBottom');
				if (that.busy == true) return false;
				that.busy = true;
				that.config.current_page += 1;
				that.getGoodsList();
			},
			onPullDownRefresh() {
				var that = this;
				setTimeout(() => {
					that._load();
					uni.stopPullDownRefresh();
				}, 500);
			},
			//关键字搜索
			onSearch(e) {
				var that = this;
				that.keyword = e.detail.value;
				that._load();
			},
			//跳转至夺冠名
			toConfirm(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				var value = that.goodsList[index];
				// app.globalData.namingGoodsInfo = value;
				uni.navigateTo({
					url: '/pages/store/naming/confirm/confirm?goods_id=' + value.id,
				});
			}
		}
	}
</script>
<style>
	@import url("../../../../common/css/naming-goods-list.css");

	.search-view {
		margin: 24rpx 20rpx 0rpx;
		height: 80rpx;
		background: rgba(245, 245, 245, 1);
		border-radius: 10rpx;
		align-items: center;
		padding: 0rpx 45rpx;
		font-size: 28rpx;
	}

	.search-view image {
		width: 28rpx;
		height: 28rpx;
	}
	.search-view input{
		width:580rpx;
	}
</style>
